<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="账号" prop="account">
            <el-input v-model="ruleForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="cfpassword">
            <el-input v-model="ruleForm.cfpassword" type="password" />
        </el-form-item>
        <el-form-item label=" ">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                Create
            </el-button>
        </el-form-item>

    </el-form>
</template>
  
<script setup>
import { reactive, ref } from 'vue'


const ruleFormRef = ref()
const ruleForm = ref({
    account: '',
    password: '',
    cfpassword: ''
})

const rules = reactive({
    account: [
        { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
        { pattern: /^[a-zA-Z]{6,10}$/, message: '用户名由英文字母组成，长度为6~10个字符', trigger: ['change', 'blur'] }

    ],
    password: [
        { required: true, message: '请输入至6个字符的密码', min: 6, trigger: ['change', 'blur'] },
    ],
    cfpassword: [
        { required: true, message: '请输入确认密码', trigger: ['change', 'blur'] },
        {
            validator: (rule, value, callback) => {
                console.log('rule',rule);
                console.log('value',value);
                console.log('callback',callback);
                if (value !== ruleForm.value.password) {
                    callback(new Error("两次密码输入不一致"))
                } else {
                    callback()
                }
            },
            trigger: ['change', 'blur']
        }

    ]

})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            // 调用后台提供的注册接口
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>